<template>
  <div class="dnd-flow" @drop="onDrop">
    <Sidebar :data="data" />
    <div class="right">
      <Topbar @reset="resetTransform"></Topbar>
      <VueFlow
        :nodes="nodes"
        @dragover="onDragOver"
        @dragleave="onDragLeave"
        :class="{ dark: data.dark }"
      >
        <DropzoneBackground
          :style="{
            backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
            transition: 'background-color 0.2s ease',
          }"
        >
          <p v-if="isDragOver">Drop here</p>
        </DropzoneBackground>
        <Controls position="top-left"> </Controls>
      </VueFlow>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, provide } from "vue";
import { VueFlow, useVueFlow } from "@vue-flow/core";
import { ControlButton, Controls } from "@vue-flow/controls";
import { MiniMap } from "@vue-flow/minimap";
import DropzoneBackground from "./comp/DropzoneBackground.vue";
import Sidebar from "./comp/Sidebar.vue";
import Topbar from "./comp/Topbar.vue";
import useDragAndDrop from "./comp/useDnD.js";
// import { initialEdges, initialNodes } from "./initial-elements.js";

const { onInit, onNodeDragStop, onConnect, addEdges, setViewport, toObject } =
  useVueFlow();

const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop();

const nodes = ref([]);

// 主题
const data = reactive({
  dark: false,
});
const resetTransform = () => {
  setViewport({ x: 0, y: 0, zoom: 1 });
};
onConnect(addEdges);

provide("parentData", data);
</script>

<style>
@import "https://cdn.jsdelivr.net/npm/@vue-flow/core@1.44.0/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/core@1.44.0/dist/theme-default.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/controls@latest/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/minimap@latest/dist/style.css";
@import "https://cdn.jsdelivr.net/npm/@vue-flow/node-resizer@latest/dist/style.css";

.vue-flow__minimap {
  transform: scale(75%);
  transform-origin: bottom right;
}

.dnd-flow {
  /* flex-direction: column; */
  display: flex;
  height: 100%;
  width: 100%;
  /* border: 1px solid #f00; */
}
.right {
  width: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.dnd-flow .vue-flow-wrapper {
  flex-grow: 1;
  height: 100%;
}

@media screen and (min-width: 640px) {
  .dnd-flow {
    flex-direction: row;
  }

  .dnd-flow aside {
    min-width: 25%;
  }
}

@media screen and (max-width: 639px) {
  .dnd-flow aside .nodes {
    display: flex;
    flex-direction: row;
    gap: 5px;
  }
}

.dropzone-background {
  position: relative;
  height: 100%;
  width: 100%;
}

.dropzone-background .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.dark {
  background: #2d3748;
  color: #fffffb;
}

.dark .vue-flow__node {
  background: #4a5568;
  color: #fffffb;
}

.dark .vue-flow__node.selected {
  background: #333;
  box-shadow: 0 0 0 2px #2563eb;
}
</style>
